﻿@page "/docs/extensions/datagrid/features/header-group"

<Seo Canonical="/docs/extensions/datagrid/features/header-group" Title="Blazorise DataGrid Header Group" Description="Learn Blazorise by the example. Header Group feature for Blazorise DataGrid allows you to easily group a set of defined columns by rendering a top row header which groups the columns by the defined Caption" />

<DocsPageTitle Path="Extensions/DataGrid/Features/Header Group">
    Blazorise DataGrid: Header Group
</DocsPageTitle>

<DocsPageLead>
    Header Group feature for Blazorise DataGrid allows you to easily group a set of defined columns by rendering a top row header which groups the columns by the defined Caption.
</DocsPageLead>

<DocsPageSection>
    <DocsPageSectionHeader Title="Header Group">
        <Paragraph>
            You can define columns that can be grouped by assigning the <Code>HeaderGroupCaption</Code> and enabling <Code>ShowHeaderGroupCaptions</Code> on the <Code>DataGrid</Code>.
        </Paragraph>
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <DataGridHeaderGroupExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="DataGridHeaderGroupExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Header Group Template">
        <Paragraph>
            You can define also further customize the look of each header group by defining <Code>HeaderGroupCaptionTemplate</Code>.
        </Paragraph>
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <DataGridHeaderGroupTemplateExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="DataGridHeaderGroupTemplateExample" />
</DocsPageSection>

<DocsPageApi>
    <DocsPageApiItem Url="docs/extensions/datagrid/api" Name="<DataGrid />" />
</DocsPageApi>